<template>
    <el-tabs type="border-card" style="margin-top: 30px;">
           <!--课程名称渲染-->
        <div style="font-weight: bold;font-size: 30px">{{coursename}}<a ></a></div>

        <el-tab-pane label="知识点树" style="margin-top:30px;">
            <!--知识点树-->
            <div class="custom-tree-container">
                <div class="block">
                    <el-tree
                            :data="TreeData"
                            :props="defaultProps"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            :expand-on-click-node="false"
                            :render-content="renderContent"
                    >
                    </el-tree>

                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="我的练习">
            <!--//题目渲染-->
            <!--<div :data="exerciseList" >-->
                <!--<ol>-->
                    <!--&lt;!&ndash;单选题  type为1&ndash;&gt;-->
                    <!--<li  v-if="item.exerciseInfo.type=='1'" v-for="item in  exerciseList">-->
                        <!--<span>单选题：</span> {{ item.choice.content}}-->
                        <!--<div style="margin-top:15px">  <el-radio  label="1">{{item.choice.labela}}</el-radio></div>-->
                        <!--<div tyle="margin-top:15px">  <el-radio  label="2">{{item.choice.labelb}}</el-radio></div>-->
                        <!--<div tyle="margin-top:15px">  <el-radio  label="3">{{item.choice.labelc}}</el-radio></div>-->
                        <!--<div tyle="margin-top:15px">  <el-radio  label="4">{{item.choice.labeld}}</el-radio></div>-->
                        <!--<div tyle="margin-top:30px">  我的答案</div>-->
                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--&lt;!&ndash;弹框式查看答案&ndash;&gt;-->
                            <!--<el-popover placement="top" trigger="click">-->
                                <!--<div>   正确答案：{{item.choice.answer}}</div>-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                    <!--&lt;!&ndash;多选题&ndash;&gt;-->
                    <!--<li  v-if="item.exerciseInfo.type=='2'" v-for="item in  exerciseList">-->
                        <!--<span>多选题:</span>{{ item.choice.content}}-->
                        <!--<div><el-checkbox label="A"><span>A</span>{{item.choice.labela}}</el-checkbox></div>-->
                        <!--<div><el-checkbox label="B"><span>B</span>{{item.choice.labelb}}</el-checkbox></div>-->
                        <!--<div><el-checkbox label="C"><span>C</span>{{item.choice.labelc}}</el-checkbox></div>-->
                        <!--<div><el-checkbox label="D"><span>D</span>{{item.choice.labeld}}</el-checkbox></div>-->
                            <!--<div v-if="item.choice.labele ==null"><el-checkbox label="E"><span>E</span> {{item.choice.labele}}</el-checkbox></div>-->
                        <!--<div v-if="item.choice.labelf ==null"> <el-checkbox label="F"><span>F</span> {{item.choice.labelf}}</el-checkbox></div>-->
                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="top"-->
                                    <!--trigger="click">-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                    <!--<li  v-if="item.exerciseInfo.type=='3'" v-for="item in  exerciseList">-->
                        <!--<span>判断题：</span>{{ item.trueFalse.content}}-->
                        <!--<div style="margin-top: 30px">-->
                            <!--<el-radio-group >-->
                            <!--<el-radio :label="-1">错</el-radio>-->
                            <!--<el-radio :label="1">对</el-radio>-->
                        <!--</el-radio-group>-->
                        <!--</div>-->

                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="top"-->
                                    <!--trigger="click">-->
                                <!--<div style="margin-top: 10px;" v-if="item.trueFalse.answer==1"> <span>正确答案：</span> 正确</div>-->
                                <!--<div style="margin-top: 10px;" v-if="item.trueFalse.answer==2"> <span>正确答案：</span> 错误</div>-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                    <!--<li  v-if="item.exerciseInfo.type=='4'" v-for="item in  exerciseList">-->
                        <!--<span>填空题：</span>{{ item.completion.content}}-->
                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="top"-->
                                    <!--trigger="click">-->
                                <!--正确答案：{{item.completion.answer}}-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                    <!--<li  v-if="item.exerciseInfo.type=='5'" v-for="item in  exerciseList">-->
                        <!--<span>简答题：</span>{{ item.shortAnswer.content}}-->
                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="right"-->
                                    <!--trigger="click">-->
                                <!--正确答案：{{item.shortAnswer.answer}}-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                    <!--<li  v-if="item.exerciseInfo.type=='6'" v-for="item in  exerciseList">-->
                        <!--<span>程序设计题：</span>{{ item.programming.content}}-->
                        <!--<div style="float: right;">-->
                            <!--<el-button size="mini" icon="el-icon-edit" >保存</el-button>-->
                            <!--<el-popover-->
                                    <!--placement="top"-->
                                    <!--trigger="click">-->
                                <!--<div>正确答案：{{item.programming.answer}}</div>-->
                                <!--<el-button  size="mini" slot="reference">查看答案</el-button>-->
                            <!--</el-popover>-->
                        <!--</div>-->
                        <!--<hr style="margin-top: 40px">-->
                    <!--</li>-->
                <!--</ol>-->
            <!--</div>-->
        </el-tab-pane>
    </el-tabs>
</template>
<script>

   export default {
       data(){
           return{
               courseid:'',
               coursename:this.$route.query.coursename,
               TreeData: [],
               exerciseList:[],
               defaultProps: {
                   children: 'children',
                   label: 'name'
               },
               total: 0,
               pageIndex: 1, //页码
               pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
               pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表
           }
       },
       methods:{
           renderContent(h, { node, data, store }) {

               return (
                   <span class="tree-expand">
                   <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 20px; padding-right: 8px;">
                   <span>
                   <span v-show="!node.isEdit">{node.label}</span>
               </span>
               </span>
               </span>);
           },
            getDataList(){
                this.$http.get("/api/kpoint/getKpointTree/"+this.courseid).then((res)=>{
                   this.TreeData=res.data.data;
                }).catch((error)=>{
                    console.log(error);
                });
                let para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    courseid: this.courseid,
                    studentid:'2',
                };
                this.$http.post('/api/exercise/findByCondition',para).then((res)=>{
                    console.log(res.data.data);
                    this.exerciseList=res.data.data;
                }).catch((error)=>{
                })
            },

       },
       mounted() {
           this.courseid = this.$route.query.courseid;
           this.getDataList(); //进入页面就加载数据
       }

   }
</script>

<style scoped>

</style>